<extend name="common:commonTemplate"/>
<block name="main_content">
    <style>
        .detail-label {
            display: inline-block;
            margin: 20px 0;
        }

        td {
            padding: 2px !important;
            text-align: center !important;
        }

        tr {
            cursor: pointer !important;
        }

        tr.active td {
            background-color: #FF6666 !important;
            color: white !important;
        }

        td input {
            margin: 0;
            padding: 0;
            width: 90%
        }
    </style>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a class="tip-bottom" href="index.html"
                   data-original-title="Go to Home"><i class="icon-home"></i> 首页</a>
                <a href="#">基础数据</a> <a class="current" href="#">产品字段基础数据</a>
            </div>

        </div>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-title">
						<span class="icon"> <i class="icon-info-sign"></i>
						</span>
                            <h5>搜索条件</h5>
                        </div>
                        <div class="widget-content nopadding">
                            <form novalidate="novalidate" id="basic_validate"
                                  name="basic_validate" action="#" method="post"
                                  class="form-horizontal">
                                <div class="control-group">
                                    <label class="control-label">字段CODE</label>
                                    <div class="controls">
                                        <input type="text" class="field_code">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">字段名称</label>
                                    <div class="controls">
                                        <input type="text" class="field_name">
                                    </div>
                                </div>

                                <div class="form-actions">
                                    <input id="btn_search" type="button" class="btn btn-success" value="搜索">
                                    <input id="btn_add"  type="button" class="btn btn-info" value="新增">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
                            <h5>搜索结果</h5>
                        </div>
                        <div class="widget-content nopadding">
                            <table id="search_result" page_index="1"
                                   class="table table-bordered table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>字段CODE</th>
                                    <th>字段名称</th>
                                    <th>字段值</th>
                                    <th>单位</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>


                    <div class="row-fluid" id="editor_loc">
                        <div class="span12">
                            <form id="detail-form">
                                <div class="widget-box">
                                    <div class="widget-title">
                                        <span class="icon"> <i class="icon-info-sign"></i></span>
                                        <h5>详细信息</h5>
                                        <a type="button" class="btn btn-danger save-detail"
                                           style="float: right">保存详情</a>
                                    </div>

                                    <div class="widget-content">
                                        <div class="row-fluid">
                                            <div class="span4">
                                                <label class="detail-label">字段CODE ：</label>
                                                <input type="text" name="field_code">
                                                <input type="hidden" id="field_id">
                                            </div>
                                            <div class="span4">
                                                <label class="detail-label">字段名称 ：</label>
                                                <input type="text" name="field_name">
                                            </div>
                                            <div class="span4">
                                                <label class="detail-label">单位 ：</label>
                                                <input type="text" name="unit">
                                            </div>
                                        </div>

                                        <div class="widget-box">
                                            <div class="widget-title"><span class="icon"> <i
                                                    class="icon-th"></i> </span>
                                                <h5>选项列表</h5>
                                                <a id="btn-add-option" class="btn btn-primary" style="float: right;">添加值选项</a>
                                            </div>
                                            <div class="widget-content nopadding">
                                                <table id="item-table" page_index="1"
                                                       class="table table-bordered table-striped table-option">
                                                    <thead>
                                                    <tr>
                                                        <th>选项值</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>


                </div>
            </div>

        </div>


    </div>
</block>

<block name="js_content">
    <script>
        (function (main) {
            var fieldList = {};

            fieldList.tableOptionItem = "<tr><td><input type='text' class='item-value' value=''></td><td><a>编辑</a>|<a class='del-item' item-id=''>删除</a></td></tr>";

            fieldList.emptyDetail = function(){

            }
            //删除每一项事件
            fieldList.delItemEvent = function(){
                $(".del-item").click(function () {
                    var _this = this;
                    //调用后台删除该行数据
                    //如果ID 不为空那么发起请求到后台删除该行数据
                    if($('#field_id').val()){
                        $.ajax({
                            url :'/AjaxService/center/field/deleteOption',
                            dataType:'json',
                            data:{'option_id':$(_this).attr('item-id')},
                            success:function(resp){
                                if(resp.IsSuccess == 1){
                                    $(_this).closest('tr').remove();
                                    alert('删除成功!');
                                }
                            }
                        });
                    }else{
                        $(_this).closest('tr').remove();
                    }

                });
            };

            //删除每一项事件
            fieldList.editItem = function(){
                $(".edit-item").click(function () {
                    var _this = this;

                    //td 嵌入文本编辑框
                    var ele = $(this).closest('tr').find('.item-value');
                    if($(ele).is('td')){
                        var value = $(ele).text();
                        $(ele).remove();
                        $(this).closest('tr').prepend("<td><input type='text' class='item-value' value='"+value+"'></td>");
                    }


                });
            }

            //填充表格
            fieldList.fillFieldTable = function (lst_field) {
                var html = '';
                if (lst_field.length > 0) {
                    for (var index in lst_field) {
                        var field = lst_field[index];
                        var tr_html = "<tr class='tr-item' data-id='" + field.id + "'>";
                        tr_html += "<td class='field_code'>" + field.field_code + "</td>"
                        tr_html += "<td class='field_name'>" + field.field_name + "</td>"
                        tr_html += "<td>[" + field.option_value + "]</td>"
                        tr_html += "<td class='unit'>" + field.unit + "</td>"
                        tr_html += "</tr>";
                        html += tr_html;
                    }
                } else {
                    html = '<td style="text-align:center" colspan="10">没查到数据</td>'
                }


                $('#search_result tbody').html('');
                $('#search_result tbody').html(html);

                //详情


                //点击某一行时候触发
                $(".tr-item").click(function () {
                    $(".tr-item.active").removeClass("active");
                    $(this).addClass('active');
                    var _this = $(this);

                    $('input[name="field_code"]').val($(_this).find('.field_code').text());
                    $('input[name="field_name"]').val($(_this).find('.field_name').text());
                    $('input[name="unit"]').val($(_this).find('.unit').text());
                    $('#field_id').val($(_this).attr('data-id'));

                    //设置不可编辑
                    $('input[name="field_code"]').attr('readonly','readonly');
                    //加载详情
                    $.ajax({
                        url: '/AjaxService/center/field/getDetail',
                        dataType: 'json',
                        data: {'id': $(_this).attr('data-id')},
                        type: 'POST',
                        success: function (resp) {
                            fieldList.fillOptionTable(resp.Result);
                        }
                    })
                });

            };

            //填充详情表
            fieldList.fillOptionTable = function (items) {
                var html = '';
                if (items.length > 0) {
                    for (var index in items) {
                        var field = items[index];
                        var tr_html = "<tr item-id='" + field.id + "'><td class='item-value'>" + field.option_value + "</td><td><a class='edit-item'>编辑</a>|<a class='del-item' item-id='"+ field.id +"'>删除</a></td></tr>"

                        html += tr_html;
                    }
                } else {
                    html = '<td style="text-align:center" colspan="10">没查到数据</td>'
                }


                $('#item-table tbody').html('');
                $('#item-table tbody').html(html);

                //删除某一项时候触发
                fieldList.delItemEvent();
                fieldList.editItem();

            }

            /**
             * 添加监听
             **/
            fieldList.registerListener = function () {


                $("#btn_add").click(function () {
                    $(".tr-item.active").removeClass("active");

                    $('input[name="field_code"]').val('');
                    $('input[name="field_code"]').removeAttr("readonly");
                    $('input[name="field_name"]').val('');
                    $('input[name="unit"]').val('');
                    $("#field_id").val('');

                    $('#item-table tbody').html('');
                    $("html,body").animate({scrollTop:$("#editor_loc").offset().top},1000)
                });

                //添加选项按钮
                $("#btn-add-option").click(function () {
                    $(".table-option").append(fieldList.tableOptionItem);

                    //删除某一项时候触发
                    fieldList.delItemEvent();
                    fieldList.editItem();
                });
                //查询
                $("#btn_search").click(function () {
                    $.ajax({
                        url: '/AjaxService/center/field/search',
                        dataType: 'json',
                        data: {'field_code': $('.field_code').val(), 'field_name': $('.field_name').val()},
                        type: 'POST',
                        success: function (resp) {
                            fieldList.fillFieldTable(resp.Result);

                            //清空详情
                            $('input[name="field_code"]').val('');
                            $('input[name="field_name"]').val('');
                            $('input[name="unit"]').val('');
                            $("#field_id").val('');

                            $('#item-table tbody').html('');

                            //选择第一行
                            $(".tr-item:first").trigger('click');
                        }
                    })
                });


                //保存详情按钮
                $(".save-detail").click(function () {
                    var param = {};

                    param.field_code = $("input[name='field_code']").val();
                    param.field_name = $("input[name='field_name']").val();
                    param.unit = $("input[name='unit']").val();
                    param.field_id = $("#field_id").val();

                    var items = [];

                    $(".table-option tbody tr").each(function (index, item) {
                        if($(item).find(".item-value").is("input")){
                            items.push({"option_value": $(item).find(".item-value").val() , "id":$(item).attr('item-id')});
                        }else{
                            items.push({"option_value": $(item).find(".item-value").text() , "id":$(item).attr('item-id')});
                        }

                    });

                    param.items = items;

                    //保存数据操作
                    $.ajax({
                        url: '/AjaxService/center/field/saveorupdate',
                        dataType: 'json',
                        data: param,
                        type: 'POST',
                        success: function (resp) {
                            if(resp.IsSuccess == 0 )alert(resp.ErrorMsg);
                            $("#btn_search").trigger('click');
                        }
                    })
                })
            };

            main.fieldList = fieldList;


        })(window);

        /**
         *
         */
        window.fieldList.registerListener();
        $("#btn_search").trigger('click');


    </script>

</block>